<template>
  <div class="flex flex-col w-52 bg-[#212A41] text-[14px] text-[#9EA8C0] min-h-[470px] mr-3.5">
    <div class="flex h-11 items-center">
      <div class="w-full flex justify-center items-center" @click="AccountShow = !AccountShow">
        <div>账号管理</div>
        <div style="margin-left:57px;">
          <img v-if="!AccountShow" src="../assets/arrow_top.png" style="width: 12px;height:12px;" alt="">
          <img v-if="AccountShow" src="../assets/arrow_bottom.png" style="width: 12px;height:12px;" alt="">
        </div>
      </div>
    </div>
    <div v-if="AccountShow" class="flex h-11 items-center">
      <router-link to="/mine/account" class="w-full flex justify-center items-center">
        <div>账号管理</div>
        <div style="margin-left:69px;"></div>
      </router-link>
    </div>
    <div class="flex h-11 items-center">
      <div class="w-full flex justify-center items-center" @click="ParkShow = !ParkShow" style="cursor: pointer;">
        <div>园区管理</div>
        <div style="margin-left:57px;">
          <img v-if="!ParkShow" src="../assets/arrow_top.png" style="width: 12px;height:12px;" alt="">
          <img v-if="ParkShow" src="../assets/arrow_bottom.png" style="width: 12px;height:12px;" alt="">
        </div>
      </div>
    </div>
    <div v-if="ParkShow" class="flex h-11 items-center">
      <router-link to="/mine/parks" class="w-full flex justify-center items-center">
        <div>我的园区</div>
        <div style="margin-left:69px;"></div>
      </router-link>
    </div>
    <div class="flex h-11 items-center">
      <div class="w-full flex justify-center items-center" @click="ProjectShow = !ProjectShow" style="cursor: pointer;">
        <div>项目管理</div>
        <div style="margin-left:57px;">
          <img v-if="!ProjectShow" src="../assets/arrow_top.png" style="width: 12px;height:12px;" alt="">
          <img v-if="ProjectShow" src="../assets/arrow_bottom.png" style="width: 12px;height:12px;" alt="">
        </div>
      </div>
    </div>
    <div v-if="ProjectShow" class="flex h-11 items-center">
      <router-link to="/mine/projects" class="w-full flex justify-center items-center">
        <div>我的项目</div>
        <div style="margin-left:69px;"></div>
      </router-link>
    </div>
    <div class="flex h-11 items-center">
      <router-link to="/mine/news" class="w-full flex justify-center items-center">
        <div>我的动态</div>
        <div style="margin-left:69px;"></div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MineLeftNav',
  props: {
    msg: String
  },
  data() {
    return {
      AccountShow: false,
      ParkShow: false,
      ProjectShow: false
    }
  },
  created() {
    this.setCurrentPage()
  },
  methods: {
    setCurrentPage() {
      if (this.$router.currentRoute.name === 'AccountView') {
        this.AccountShow = true
      } else if (this.$router.currentRoute.name === 'ParksView') {
        this.ParkShow = true
      } else if (this.$router.currentRoute.name === 'ProjectsView') {
        this.ProjectShow = true
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nav-active {
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background-color: #FE7743;
}
</style>
